<template>
	<view class="zone">
		<Header title="零钱提现"></Header>
		<view class="main">

			<view class="wdye">
				<text class="t1">我的余额</text>
				<text class="t2">{{mymoney}}</text>
				<view class="mingxi" @click="$p.navto('/pages/index/xianyuBalance?id=4')">
					明细
				</view>
				<image class="yun" src="http://image.qxgm.site/tdz/img/public/m_yun.png" mode="widthFix"></image>
			</view>

			<view class="t_info">
				<view class="title">
					<image src="http://image.qxgm.site/tdz/img/public/l1.png" mode="widthFix"></image>
					<text>提现金额</text>
					<image src="http://image.qxgm.site/tdz/img/public/r1.png" mode="widthFix"></image>
				</view>

				<view class="m_area">
					<view :class="['tab',money==0.3?'act':'']" @click="changeTab(0.3)">
						新人￥0.3
					</view>
					<view class="stab">
						<view :class="['tab',money==20?'act':'']" @click="changeTab(20)">
							￥20
						</view>
						<view :class="['tab',money==50?'act':'']" @click="changeTab(50)">
							￥50
						</view>
						<view :class="['tab',money==100?'act':'']" @click="changeTab(100)">
							￥100
						</view>
						<view :class="['tab',money==200?'act':'']" @click="changeTab(200)">
							￥200
						</view>
						<view :class="['tab',money==500?'act':'']" @click="changeTab(500)">
							￥500
						</view>
						<view :class="['tab',money==1000?'act':'']" @click="changeTab(1000)">
							￥1000
						</view>
					</view>
				</view>

				<view class="link">
					<image class="limg" src="http://image.qxgm.site/tdz/img/tixian/mg-03.png" mode="widthFix"></image>
					<text class="lp">提现至支付宝</text>
					<view class="sbj" @click="$p.navto('/pages/index/receivingAccount')">
						收款账号
					</view>
				</view>
				<view class="link">
					<image class="limg" src="http://image.qxgm.site/tdz/img/tixian/mg-04.png" mode="widthFix"></image>
					<text class="lp">提现至微信</text>
					<view class="sbj" >
						收款账号
					</view>
				</view>
				<view class="link">
					<image class="limg" src="http://image.qxgm.site/tdz/img/tixian/mg-05.png" mode="widthFix"></image>
					<text class="lp">提现至银行卡</text>
					<view class="sbj">
						收款账号
					</view>
				</view>

				<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000" class="confirmTi"
					@click="confirmTi">确认提现</u-button>

				<view class="explain">
					<image src="http://image.qxgm.site/tdz/img/tixian/mg-07.png" mode="widthFix"></image>
					<view class="biaot">
						温馨提示：
					</view>
					<p>1.每个支付宝只能绑定一个平台账号，提现无手续费</p>
					<p>2.每日可提现一次，每次最低0.3元，0.3元只能提现一次。</p>
					<p>3.提现时间为:9:00-16:30，节假日不休息，18点左右自动结算。</p>
					<p>4.如未到账或收款方式填写错误请及时联系官方客服。</p>
					<p>5.严禁多开、套号、放单、机刷等违规操作，一经发现扣除 全部奖励并永久封号。</p>
				</view>

			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				money: '0.3',
				mymoney: '',
			}
		},
		onShow() {
			this.getUserInfo();
		},
		methods: {
			// 获取个人信息
			async getUserInfo() {
				let res = await this.$http.index.getUserInfo()
				if (res.code == 1) {
					this.mymoney = res.data.money
				}
			},
			// 切换选择金额
			changeTab(num) {
				console.log(num);
				this.money = num
			},
			// 确认提现
			async confirmTi() {
				if (this.money > this.mymoney) {
					this.$u.toast('余额不足！')
					return
				}
				let res = await this.$http.index.cash({
					amount: this.money
				})
				if (res.code == 1) {
					this.getUserInfo();
				}
				this.$u.toast(res.msg)
			}
		}
	}
</script>

<style lang="less">
	.zone {
		min-height: 100vh;
		background: url(http://image.qxgm.site/tdz/img/public/p_bg.png) no-repeat;
		background-size: 100% auto;
	}

	.title {
		display: flex;
		align-items: center;
		justify-content: center;
		background: url(http://image.qxgm.site/tdz/img/xianyu/mg-05.png) no-repeat;
		background-size: 100% 100%;
		padding: 10px 0 8px;

		image {
			width: 18%;
		}

		text {
			font-size: 20px;
			font-weight: normal;
			color: #50463E;
			line-height: 20px;
			margin: 0 13px;
		}
	}

	.wdye {
		position: relative;
		display: flex;
		align-items: center;
		background: #bcb8ba;
		height: 70px;
		box-sizing: border-box;
		padding: 0 0 0 13%;
		margin-top: 2vh;
	}

	.yun {
		position: absolute;
		left: 0;
		top: -48%;
		width: 44%;
	}

	.t1 {
		font-size: 18px;
		font-weight: normal;
		color: #333333;
		line-height: 24px;
	}

	.t2 {
		font-size: 24px;
		font-weight: normal;
		color: #333333;
		line-height: 24px;
		margin-left: 8%;
	}

	.mingxi {
		position: absolute;
		top: 12px;
		right: 13px;
		width: 54px;
		height: 24px;
		font-size: 12px;
		font-weight: normal;
		color: #fbf1be;
		line-height: 12px;
		padding: 7px 0 3px;
		text-shadow: 0 1px 1px #CB6500;
		text-align: center;
		background: url(http://image.qxgm.site/tdz/img/public/btn2.png) no-repeat;
		background-size: 100% 100%;
	}

	.limg {
		width: 50px;
	}

	.t_info {
		background: url(http://image.qxgm.site/tdz/img/public/info.png) no-repeat;
		background-size: 100% 100%;
		padding: 18px 10px 22px 10px;
	}

	.m_area {
		padding: 12px 23px 10px;
		background: url(http://image.qxgm.site/tdz/img/tixian/mg-06.png) no-repeat;
		background-size: 100% 100%;
	}

	.stab {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.tab {
		width: 32%;
		text-align: center;
		background: url(http://image.qxgm.site/tdz/img/tixian/mg-02.png) no-repeat;
		background-size: 100% 100%;
		font-size: 15px;
		font-weight: 400;
		height: 35px;
		color: #996666;
		line-height: 35px;
		margin-bottom: 3px;
	}

	.act {
		color: #333333;
		background: url(http://image.qxgm.site/tdz/img/tixian/mg-01.png) no-repeat;
		background-size: 100% 100%;
	}

	.link {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: url(http://image.qxgm.site/tdz/img/xianyu/mg-06.png) no-repeat;
		background-size: 100% 100%;
		height: 70px;
		padding: 0 15px 0 13px;
		box-sizing: border-box;
		margin-bottom: 3px;
	}

	.lp {
		flex: 1;
		margin-left: 8px;
	}

	.sbj {
		width: 84px;
		height: 33px;
		font-size: 14px;
		font-weight: normal;
		color: #fef9c9;
		text-shadow: 0 1px 1px #CB6500;
		text-align: center;
		line-height: 33px;
		background: url(http://image.qxgm.site/tdz/img/public/anniu.png) no-repeat;
		background-size: 100% 100%;
	}

	.confirmTi {
		display: block;
		margin: 15px auto 0;
		width: 116px;
		height: 37px;
		font-size: 18px;
		font-weight: normal;
		color: #fef9c9;
		text-shadow: 0 1px 1px #CB6500;
		text-align: center;
		line-height: 37px;
		background: url(http://image.qxgm.site/tdz/img/public/anniu.png) no-repeat;
		background-size: 100% 100%;
	}

	.explain {
		image {
			display: block;
			margin: 10px auto 6px;
			width: 90%;
		}

		p {
			font-size: 13px;
			font-weight: normal;
			color: #333333;
			line-height: 18px;
		}

		.biaot {
			font-size: 14px;
			font-weight: normal;
			color: #333333;
			line-height: 14px;
			margin-bottom: 7px;
		}
	}
</style>